<template>
	<view class="demand-detail">
		<view class="demand-item" @click="goDemand(demand.id)">
			<view class="demand-item-left">
				<label class="demand-item-label">查看需求</label>
				<label class="demand-item-text">点击查看该需求详情页</label>
			</view>
			<label class="user-item-arrow"></label>
		</view>
		<uni-collapse accordion>
			<uni-collapse-item titleBorder="none" :border="false" class="demand-sign">
				<template v-slot:title>
					<view class="demand-title">
						<label class="demand-item-label">已报名</label>
						<label class="demand-item-num">{{demand.signList.length}}</label>
						<label class="demand-item-select"></label>
					</view>
				</template>
				<view class="demand-user-list">
					<view class="user-item" v-for="(item,i) in demand.signList" :key="i" @click="goUser(item.userid)">
						<label class="isNew" v-if="item.isNew"></label>
						<image class="user-head" :src="item.head"></image>
						<label class="user-auth" v-if="item.isAuth"></label>
					</view>
				</view>
			</uni-collapse-item>
			<uni-collapse-item titleBorder="none" :border="false" class="demand-enroll">
				<template v-slot:title>
					<view class="demand-title">
						<label class="demand-item-label">已录取</label>
						<label class="demand-item-num">{{demand.enrollList.length}}</label>
						<label class="demand-item-select"></label>
					</view>
				</template>
				<view class="demand-user-list">
					<view class="user-item" v-for="(item,i) in demand.enrollList" :key="i" @click="goUser(item.userid)">
						<label class="isNew" v-if="item.isNew"></label>
						<image class="user-head" :src="item.head"></image>
						<label class="user-auth" v-if="item.isAuth"></label>
					</view>
				</view>
			</uni-collapse-item>
			<uni-collapse-item titleBorder="none" :border="false" class="demand-cancel">
				<template v-slot:title>
					<view class="demand-title">
						<label class="demand-item-label">已放弃</label>
						<label class="demand-item-num">{{demand.cancelList.length}}</label>
						<label class="demand-item-select"></label>
					</view>
				</template>
				<view class="demand-user-list">
					<view class="user-item" v-for="(item,i) in demand.cancelList" :key="i" @click="goUser(item.userid)">
						<label class="isNew" v-if="item.isNew"></label>
						<image class="user-head" :src="item.head"></image>
						<label class="user-auth" v-if="item.isAuth"></label>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				demand: {}
			}
		},
		onLoad() {
			this.getInfo();
		},
		methods: {
			getInfo() {
				//调接口
				this.demand = {
					id: 1, //需求id
					signList: [], //已报名,
					enrollList: [], //已录取
					cancelList: [] //已取消
				}
				for (var i = 0; i <= 10; i++) {
					var item = {
						userid: i,
						isNew: true,
						isAuth: true,
						head: "url"
					}
					this.demand.signList.push(item);
					this.demand.enrollList.push(item);
					this.demand.cancelList.push(item);
				}
				this.$forceUpdate()
			},
			goDemand(id) {
				uni.navigateTo({
					url: "../index/detail?id=" + id
				})
			},
			goUser(id) {
				uni.navigateTo({
					url: '../user/demandProgress?id=' + id
				})
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.demand-detail {
		height: 100%;
		background-color: #F4F4F4;
		padding: 24rpx 0;
	}

	.demand-item {
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 28rpx 32rpx;
		margin-bottom: 24rpx;
	}

	.demand-item-left {
		display: flex;
		flex-flow: column;
		flex: 1;
	}

	.demand-item-label {
		color: #181818;
		font-size: 30rpx;
		font-weight: 500;
		background: url(../../static/images/icon-demand-show@3x.png) left center no-repeat;
		background-size: 30rpx;
		padding-left: 35rpx;
	}

	.demand-item-text {
		margin-top: 10rpx;
		color: #7B7B7B;
		font-size: 24rpx;

	}

	.demand-item-num {
		margin-left: 15rpx;
		padding-left: 15rpx;
		border-left: 1rpx solid #D2D2D2;
		font-size: 30rpx;
		color: #7B7B7B;
	}

	.user-item-arrow {
		width: 32rpx;
		height: 32rpx;
		background: url(../../static/images/icon_jinru@3x.png) center no-repeat;
		background-size: 32rpx;
	}

	.uni-collapse {
		background-color: initial !important;
	}

	.demand-title {
		padding: 28rpx 32rpx;
	}

	.demand-user-list {
		padding: 0 32rpx 32rpx 32rpx;
	}

	.demand-sign,
	.demand-enroll,
	.demand-cancel {
		background-color: #FFFFFF;
		margin-bottom: 24rpx;
		padding-right: 10rpx;
	}

	.demand-sign .demand-item-label {
		background-image: url(../../static/images/icon-demand-sign@3x.png);
		color: #1371FF;
	}

	.demand-enroll .demand-item-label {
		background-image: url(../../static/images/icon-demand-enroll@3x.png)
	}

	.demand-cancel .demand-item-label {
		background-image: url(../../static/images/icon-demand-cancel@3x.png)
	}

	.user-item {
		width: 75rpx;
		height: 75rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 25rpx;
		margin-right: 32rpx;
		display: inline-block;
	}

	.user-head {
		width: 68rpx;
		height: 68rpx;
		border-radius: 50%;
		background-color: #007AFF;
	}

	.isNew {
		width: 14rpx;
		height: 14rpx;
		background: #FA5151;
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.user-auth {
		width: 20rpx;
		height: 20rpx;
		background: url(../../static/images/icon_shiming@3x.png) center no-repeat;
		background-size: 20rpx;
		position: absolute;
		right: 0;
		bottom: 0;
		padding: 0;
	}
</style>
